<template>
  <!-- 修改用户名与密码
        1：导入获取详情的api
        2:进入页面就调用api获取详情
        3：回显数据
        4：修改
            a:定义修改api
            b:导入修改api
            c:点击更新时调用修改api

      基础信息
        1：获取基本信息（定义与导入调用获取并渲染）
        2：修改基本信息（定义与导入调用）
 -->
  <div class="detail">
    <el-card>
      <el-tabs>
        <el-tab-pane label="登录帐户设置">
          <el-form
            ref="form"
            label-width="100px"
            class="form"
            :model="form"
            :rules="rules"
          >
            <el-form-item label="姓名" prop="username">
              <el-input v-model="form.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" show-password />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit">更新</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" lazy>
          <!-- 动态组件:
                  100个组件要切换，每次只显示一个，怎么实现？
           -->
          <component
            :is="'Info'"
            :user-info="userInfo"
            @updateUserInfo="updateUserInfo"
          />
          <!-- <Info /> -->
        </el-tab-pane>
        <el-tab-pane label="岗位信息" lazy>
          <Job />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { sysUser, sysUserPut } from '@/api/login'
// import Info from './components/Info.vue'
export default {
  components: {
    Info: () => import('./components/Info.vue'),
    Job: () => import('./components/Job.vue')
  },
  //   props: ['id'],
  data() {
    return {
      id: this.$route.params.id,
      form: {
        username: '', //	string	非必须
        password: '' //	string	非必须
      },
      userInfo: {},
      initUserInfo: {},
      rules: {
        username: [{ required: true, message: '必填', trigger: 'change' }], //	string	非必须
        password: [{ required: true, message: '必填', trigger: 'change' }] //	string	非必须
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取用户完整信息
    async getData() {
      const res = await sysUser(this.id)
      this.userInfo = JSON.parse(JSON.stringify(res.data))
      this.initUserInfo = res.data
      this.form.username = res.data.username
      // console.log(111, res)
    },
    submit() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          // 对象合并 {...a,...b}  Object.assign(目标对象,需要合并对象)
          await sysUserPut(Object.assign({}, this.initUserInfo, this.form))
          if (this.id === this.$store.state.login.userInfo.userId) {
            this.$store.dispatch('login/getUserInfo')
          }
          this.$message.success('修改成功')
          // 接口更新完成也需要更新到用户详情内
          this.userInfo.username = this.form.username
          this.userInfo.password = this.form.password
        }
      })
    },
    // 个人详情修改完，要更新数据到帐户设置内
    updateUserInfo() {
      this.form.username = this.userInfo.username
      this.initUserInfo = JSON.parse(JSON.stringify(this.userInfo))
    }
  }
}
</script>
<style lang="scss" scoped>
// scoped:作用，只管当前组件和子组件最外层
// 看得到的就管得到，看不到的管不到
.detail {
  padding: 20px;
  .form {
    width: 500px;
    margin-top: 50px;
  }
}
</style>
